<template>
	<view class="view">
		<view v-if="modelValue.sectionType == 'radio'" style="display: flex;flex-direction: column;">
			<span>{{ modelValue.data.name }}</span>
			<radio-group @change="handleRadioChange">
				<radio v-for="(item, index) in modelValue.data.options" :key="index" :value="index"
					:checked="index === modelValue.answer">
					<img :src="getImgSrc(item.img)" v-if="item.img" />
					<span>{{ item.name }}</span>
				</radio>
			</radio-group>
		</view>
		<view v-else-if="modelValue.sectionType == 'checkBox'" style="display: flex;flex-direction: column;">
			<span>{{ modelValue.data.name }}</span>
			<checkbox-group @change="handleCheckboxChange">
				<checkbox v-for="(item, index) in modelValue.data.options" :key="index" :value="index">
					<img :src="getImgSrc(item.img)" v-if="item.img" />
					<span>{{ item.name }}</span>
				</checkbox>
			</checkbox-group>
		</view>
		<view v-else-if="modelValue.sectionType == 'input'">
			<span>{{ modelValue.data.name }}</span>
			<input class="uni-input" v-model="modelValue.answer" placeholder="请输入" />
		</view>
	</view>
</template>

<script setup>
	const emit = defineEmits(["update:modelValue"]);
	const props = defineProps({
		modelValue: {
			default: {},
			type: Object,
		}
	});
	const Data = reactive({

	})
	const {} = toRefs(Data)

	onMounted(() => {
		emit("update:modelValue", {
			...props.modelValue
		});
		// if(props.modelValue.sectionType == 'checkBox'){
		// 	props.modelValue.answer = new Array(modelValue.data.options.length).fill(false);
		// }
		console.log(props.modelValue);
		console.log(props.modelValue);
		console.log(props.modelValue);
	})
	// 添加图片域名
	function getImgSrc(path) {
		const resourcesUrl = import.meta.env.VITE_APP_RESOURCES_URL
		if (!path || /^http?:\/\//.test(path) || /^https?:\/\//.test(path)) {
			return path
		} else {
			return resourcesUrl + path
		}
	}

	function handleRadioChange(e) {
		props.modelValue.answer = e.detail.value;
	}

	function handleCheckboxChange(e) {
		props.modelValue.answer = e.detail.value;
	}
</script>

<style>

</style>